<template>
	<view class="news page">
		<view class="status_bar" style="margin-bottom: 120rpx;">
		</view>
		<v-tabs
		fixed
		v-model="current"
		 color="#999999"
		 activeColor="#333"
		 lineColor="#333"
		 paddingItem="0 50px"
		 :lineScale="0.2"
		 :tabs="tabs"
		 @change="changeTab">
		 </v-tabs>
		 <view class="list">
			  <view 
			  @click="onDetail(item)"
			  class="list-item" v-for="(item,index) in list" :key="index">
				  <view class="title">{{ item.title }}</view>
				  <image :src="item.file_url"></image>
				  <view class="desc f-r a-c j-b">
					  <text>{{ item.add_time }}</text>
					  <text>{{ item.click }}阅读</text>
				  </view>
			  </view>
		 </view>
		<TabBar page-path="/pages/news/news"></TabBar>
	</view>
</template>

<script>
	import http from '@/api/api.js'
	import { formatTimeTwo } from '@/utils/utils'
	export default {
		data() {
			return {
				current: 0,
				tabs: ['资讯', '新闻', '通告'],
				list: []
			}
		},
		onLoad() {
			this.getData()
		},
		methods: {
			onDetail(item) {
				uni.navigateTo({
					url: `/pages/news_detail/news_detail?id=${item.article_id}&type=${item.cat_id}`
				})
			},
			changeTab() {
				this.getData()
			},
			getData() {
				http.getNews(this.current + 1).then(res => {
					if (res.code === 0) {
						this.list = res.data.map(el => {
							return {
								...el,
								add_time: formatTimeTwo(el.add_time, 'Y/M/D h:m:s')
							}
						})
					}
					console.log(res)
				})
			}
 		}
	}
</script>

<style lang="less">
.news {
	height: 100vh;
	overflow: auto;
	.list {
		padding: 30rpx;
		margin-top: 60rpx;
	}
	.list-item {
		image {
			width: 100%;
			height: 392rpx;
		}
		.title {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			margin-bottom: 30rpx;
		}
		.desc {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			padding: 35rpx 0;
		}
		border-bottom: 1px solid #E4E4E4;
	}
}
</style>
